<template>
  <div class="container mb15">
    <div class="banner mt15">
      <img src="../../assets/images/setting-banner.png" class="banner" alt="">
    </div>
    <div class="wxkj-tab pl20 pr20 pt20 pb20">
      <!-- <el-tabs v-model="tab">
        <el-tab-pane label="账户信息" name="0">
          <el-card class="box-card"> -->
      <div class="wxkj-icon-title">
        <span class="icon" />
        <span>账户信息</span>
      </div>
      <div class="content">
        <div class="text f14 mt20">
          <span class="mr20 text-666">当前账号：</span>
          <span class="mr30 text-333">{{ companyInfo.phone }}</span>
          <span class="ml10 link-type" @click="modifyPhone">更换手机号码</span>
        </div>
      </div>
      <!-- </el-card>
        </el-tab-pane> -->
      <!-- <el-tab-pane label="修改密码" name="1">
          <el-card class="box-card">
            <div class="wxkj-icon-title mb30">
              <span class="icon" />
              <span>修改密码</span>
            </div>
            <div class="content-center">
              <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="登录账号：">
                  <span class="text-333">18903858472</span>
                </el-form-item>
                <el-form-item label="当前密码：">
                  <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="新密码：">
                  <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="确认新密码：">
                  <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item class="tc">
                  <el-button type="primary">确定</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs> -->
    </div>
    <edit-phone ref="editPhone" :phone="companyInfo.phone" @updatePhone="updatePhone" />
  </div>
</template>

<script>
import editPhone from './components/editPhoneDrawer'
import { mapGetters } from 'vuex'
export default {
  name: '',
  components: { editPhone },
  props: {},
  data() {
    return {
      tab: 0,
      form: {}
    }
  },
  computed: {
    ...mapGetters([
      'companyInfo'
    ])
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    modifyPhone() {
      this.$refs.editPhone.show()
    },
    updatePhone(phone) {
      const companyInfo = JSON.parse(JSON.stringify(this.companyInfo))
      companyInfo.phone = phone
      this.$store.commit('user/SET_COMPANYINFO', companyInfo)
    }
  }
}
</script>
<style lang="scss" scoped>
 .banner{
   display: block;
    width: 100%;
  }
  .content-center{
    width: 500px; margin: 0 auto;
  }
  .content{
    .explain{font-size:14px;font-weight:400;line-height:24px;color:#666666;margin-top: 12px; margin-bottom: 23px;}
  }
  .box-card{
    height: 650px;
  }
</style>
